<template>
  <div class="home-page">
    <!-- 课程表区域（替换轮播图）-->
    <div v-if="userRole === 'STUDENT' || userRole === 'TEACHER'" class="schedule-section">
      <div class="schedule-header">
        <h2>我的课程表</h2>
        <el-select v-model="semesterFilter" placeholder="请选择学期" @change="fetchScheduleData" style="width: 200px; margin-left: 20px;">
          <el-option v-for="semester in semesterOptions" :key="semester" :label="semester" :value="semester" />
        </el-select>
      </div>
      <div class="course-schedule">
        <table>
          <thead>
            <tr>
              <th>时间段</th>
              <th>星期一</th>
              <th>星期二</th>
              <th>星期三</th>
              <th>星期四</th>
              <th>星期五</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(time, timeIndex) in timeSlots" :key="timeIndex">
              <td>{{ time }}</td>
              <td v-for="day in 5" :key="day">
                <div v-for="course in getCoursesForTimeSlot(timeIndex, day-1)" :key="course.id" class="schedule-course">
                  {{ course.name }}<br>
                  {{ course.location }}
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <!-- 其他角色显示原轮播图 -->
    <el-carousel v-else height="400px" class="banner">
      <el-carousel-item v-for="item in banners" :key="item.id">
        <div class="banner-item" :style="{ backgroundImage: `url(${item.image})` }">
          <div class="banner-content">
            <h2>{{ item.title }}</h2>
            <p>{{ item.description }}</p>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>

    <!-- 核心功能模块 -->
    <!-- 删除core-modules相关el-row、el-col、module-card等内容。 -->

    <!-- 通知公告和动态 -->
    <div class="info-section">
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="card">
            <div class="card-header">
              <h3 class="card-title">
                <el-icon><Bell /></el-icon>
                通知公告
              </h3>
              <div>
                <el-button type="text" size="small" @click="loadRecentNotices" style="margin-right: 10px;">
                  刷新
                </el-button>
              <el-button type="text" @click="$router.push('/notice')">
                查看更多 <el-icon><ArrowRight /></el-icon>
              </el-button>
              </div>
            </div>
            <div class="card-content">
              <div v-if="loadingNotices" class="loading-container">
                <el-skeleton :rows="3" animated />
              </div>
              <ul v-else class="notice-list">
                <li v-for="notice in recentNotices" :key="notice.id" @click="viewNotice(notice)">
                  <div class="notice-content">
                    <el-tag :type="getTagType(notice.type)" size="small" class="notice-type">{{ getTypeLabel(notice.type) }}</el-tag>
                    <span class="notice-title">{{ notice.title }}</span>
                  </div>
                  <span class="notice-time">{{ formatTime(notice.publishTime || notice.createTime) }}</span>
                </li>
                <li v-if="recentNotices.length === 0" class="empty-item">
                  <span>暂无公告</span>
                </li>
              </ul>
            </div>
          </div>
        </el-col>
        
        <el-col :span="12">
          <div class="card">
            <div class="card-header">
              <h3 class="card-title">
                <el-icon><Calendar /></el-icon>
                待办事项
              </h3>
              <div>
                <el-button type="text" size="small" @click="userRole === 'ADMIN' ? loadAdminActivities() : userRole === 'STAFF' ? loadStaffRepairs() : loadApprovedActivities()" style="margin-right: 10px;">
                  刷新
                </el-button>
              <el-button type="text" @click="handleTodoMoreClick">
                查看更多 <el-icon><ArrowRight /></el-icon>
              </el-button>
              </div>
            </div>
            <div class="card-content">
              <div v-if="userRole === 'ADMIN'">
                <div v-if="loadingTodos" class="loading-container">
                  <el-skeleton :rows="3" animated />
                </div>
                <ul v-else class="todo-list">
                  <li v-for="activity in adminActivities" :key="activity.id">
                    <div class="todo-info">
                      <span class="todo-title">{{ activity.title }}</span>
                      <div class="todo-details">
                        <span class="todo-time">{{ formatTime(activity.publishTime) }}</span>
                        <span v-if="activity.location" class="todo-location">{{ activity.location }}</span>
                      </div>
                    </div>
                  </li>
                  <li v-if="adminActivities.length === 0" class="empty-item">
                    <span>暂无发布活动</span>
                  </li>
                </ul>
              </div>
              <div v-else-if="userRole === 'STAFF'">
                <div v-if="loadingTodos" class="loading-container">
                  <el-skeleton :rows="3" animated />
                </div>
                <ul v-else class="todo-list">
                  <li v-for="repair in staffRepairs" :key="repair.id">
                    <div class="todo-info">
                      <span class="todo-title">{{ repair.repairType }} - {{ repair.location }}</span>
                      <div class="todo-details">
                        <span class="todo-time">{{ formatTime(repair.createTime) }}</span>
                        <span class="todo-status">{{ repair.status }}</span>
                      </div>
                    </div>
                  </li>
                  <li v-if="staffRepairs.length === 0" class="empty-item">
                    <span>暂无维修申请</span>
                  </li>
                </ul>
              </div>
              <div v-else>
              <div v-if="loadingTodos" class="loading-container">
                <el-skeleton :rows="3" animated />
              </div>
              <ul v-else class="todo-list">
                <li v-for="todo in approvedActivities" :key="todo.signupId" @click="viewActivity(todo)">
                  <div class="todo-info">
                    <span class="todo-title">{{ todo.activityTitle }}</span>
                    <div class="todo-details">
                      <span class="todo-time">{{ formatTime(todo.activityPublishTime) }}</span>
                      <span v-if="todo.activityLocation" class="todo-location">{{ todo.activityLocation }}</span>
                    </div>
                  </div>
                  <el-tag v-if="userRole !== 'ADMIN'" type="success" size="small">已通过</el-tag>
                </li>
                <li v-if="approvedActivities.length === 0" class="empty-item">
                  <span>暂无待办活动</span>
                </li>
              </ul>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 统计数据（仅管理员可见，采用Admin.vue样式和数据） -->
    <div v-if="userRole === 'ADMIN'" class="stats-section">
      <el-row :gutter="20">
        <el-col :span="6" v-for="stat in adminStats" :key="stat.id">
          <div class="stat-card">
            <div class="stat-icon">
              <el-icon :size="32">
                <component :is="stat.icon" />
              </el-icon>
            </div>
            <div class="stat-content">
              <div class="stat-number">{{ stat.value }}</div>
              <div class="stat-label">{{ stat.label }}</div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 快速服务 -->
    <div v-if="userRole === 'TEACHER' || userRole === 'STUDENT'" class="quick-services">
      <h2>快速服务</h2>
      <el-row :gutter="20">
        <el-col :span="4" v-for="service in quickServices" :key="service.id">
          <div class="service-item" @click="$router.push(service.path)">
            <el-icon :size="32">
              <component :is="service.icon" />
            </el-icon>
            <span>{{ service.name }}</span>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, onBeforeUnmount, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Bell,
  Calendar,
  ArrowRight,
  Monitor,
  DataAnalysis,
  Service,
  User,
  Setting,
  Document,
  Download,
  Guide,
  Message,
  Phone,
  Location,
  InfoFilled,
  Warning
} from '@element-plus/icons-vue'
import { apiGetAnnouncementList } from '@/api/announcement'
import { getUserSignupDetails } from '@/api/activitySignup'
import { getMyAnnouncements } from '@/api/announcement'
import axios from 'axios'
import { getOverviewStats } from '@/api/stats'

export default {
  name: 'HomePage',
  components: {
    Bell,
    Calendar,
    ArrowRight,
    Monitor,
    DataAnalysis,
    Service,
    User,
    Setting,
    Document,
    Download,
    Guide,
    Message,
    Phone,
    Location,
    InfoFilled,
    Warning
  },
  setup() {
    const router = useRouter()
    const store = useStore()
    const pendingTasks = ref([])
    let todoCheckTimer = null
    const hasShownTodoDialog = ref(false)
    const semesterFilter = ref('')
    const semesterOptions = ref(['2024春季', '2024秋季', '2025春季', '2025秋季'])
    const timeSlots = [
      '8:00-9:40',
      '10:00-11:40',
      '14:00-15:40',
      '16:00-17:40',
      '19:00-20:40'
    ]
    // 学生课表用已选课程，教师课表用课程列表
    const selectedCourses = ref([])
    const teacherCourses = ref([])
    // 获取当前用户ID
    const userId = computed(() => {
      const userInfo = store.state.user.userInfo
      if (userInfo && userInfo.id) {
        return userInfo.id
      }
      return null
    })
    // 获取课表数据
    const fetchScheduleData = async () => {
      if (!userId.value) return
      if (userRole.value === 'STUDENT') {
        // 学生用已选课程
        try {
          const response = await axios.get(`/api/users/me/courses?studentId=${userId.value}`)
          let data = response.data || []
          if (semesterFilter.value) {
            data = data.filter(course => course.semester === semesterFilter.value)
          }
          selectedCourses.value = data
        } catch (e) {
          selectedCourses.value = []
        }
      } else if (userRole.value === 'TEACHER') {
        // 教师用课程列表
        try {
          const response = await axios.get(`/api/teacher/courses?teacherId=${userId.value}`)
          let data = response.data || []
          if (semesterFilter.value) {
            data = data.filter(course => course.semester === semesterFilter.value)
          }
          teacherCourses.value = data
        } catch (e) {
          teacherCourses.value = []
        }
      }
    }
    // 课表分布（表格填充）
    const getCoursesForTimeSlot = (timeIndex, dayIndex) => {
      const timeSlot = timeSlots[timeIndex]
      const dayText = ['一', '二', '三', '四', '五'][dayIndex]
      const pattern = `星期${dayText}${timeSlot}`
      if (userRole.value === 'STUDENT') {
        return selectedCourses.value.filter(course => course.schedule && course.schedule.includes(pattern))
      } else if (userRole.value === 'TEACHER') {
        return teacherCourses.value.filter(course => course.schedule && course.schedule.includes(pattern))
      }
      return []
    }

    // 获取当前用户角色
    const userRole = computed(() => {
      const user = store.state.user.userInfo || store.state.user
      return user.role || ''
    })

    // 获取待办事项并显示弹窗
    const fetchPendingTasks = async () => {
      if (userRole.value === 'admin' || userRole.value === 'ADMIN') {
        try {
          console.log('Home.vue - 获取待办事项')
          const response = await axios.get('/api/admin/todo')
          console.log('Home.vue - 待办事项响应:', response.data)
          pendingTasks.value = response.data || []
          
          // 只有有待办事项且未显示过弹窗时才显示
          if (pendingTasks.value.length > 0 && !hasShownTodoDialog.value) {
            hasShownTodoDialog.value = true
            
            // 生成弹窗内容
            const typeMap = {
              LEAVE: '请假申请',
              GRADUATION: '毕业申请',
              TITLE: '职称申请'
            }
            
            // 统计各类型数量
            const typeCount = pendingTasks.value.reduce((acc, item) => {
              acc[item.type] = (acc[item.type] || 0) + 1
              return acc
            }, {})
            
            let msg = '您有如下待审批事项已超时：<br/>'
            Object.keys(typeCount).forEach(type => {
              msg += `${typeMap[type] || type}：${typeCount[type]} 条<br/>`
            })
            msg += '是否立即前往处理？'
            
            ElMessageBox.confirm(
              msg,
              '待办事项提醒',
              {
                confirmButtonText: '立即处理',
                cancelButtonText: '稍后处理',
                type: 'warning',
                dangerouslyUseHTMLString: true
              }
            ).then(() => {
              // 跳转到第一个待办的审批页面
              const first = pendingTasks.value[0]
              if (first.type === 'LEAVE') router.push('/academic?tab=leave')
              else if (first.type === 'GRADUATION') router.push('/academic?tab=graduation')
              else if (first.type === 'TITLE') router.push('/academic?tab=title-application')
              else router.push('/academic')
            }).catch(() => {
              ElMessage.info('您可以稍后在对应模块处理')
            })
          }
        } catch (error) {
          console.error('获取待办事项失败:', error)
        }
      }
    }

    // 轮播图数据
    const banners = ref([
      {
        id: 1,
        title: '智慧校园建设',
        description: '推进语音识别、图像识别等前沿技术在校园场景的有效应用',
        image: require('@/assets/pic1.jpg')
      },
      {
        id: 2,
        title: '数据驱动决策',
        description: '为师生提供专业、易用、可信赖的数据服务',
        image: require('@/assets/pic2.png')
      },
      {
        id: 3,
        title: '智能运维管理',
        description: '基于数字孪生技术，赋能智能终端与核心机房的运维管理',
        image: require('@/assets/pic3.png')
      }
    ])

    // 核心功能模块
    // 删除core-modules相关el-row、el-col、module-card等内容。

    // 最近公告数据
    const recentNotices = ref([])
    const loadingNotices = ref(false)

    // 已通过报名的活动（待办事项）
    const approvedActivities = ref([])
    const loadingTodos = ref(false)

    // 在setup中添加管理员活动列表
    const adminActivities = ref([])

    // 1. 新增后勤人员维修申请列表
    const staffRepairs = ref([])

    // 2. 获取后勤人员维修申请
    const loadStaffRepairs = async () => {
      const userId = store.state.user.userInfo.id
      if (!userId) return
      try {
        const response = await axios.get(`/api/repair/assignee/${userId}`)
        staffRepairs.value = response.data || []
      } catch (e) {
        staffRepairs.value = []
      }
    }

    // 管理员获取自己发布的活动
    const loadAdminActivities = async () => {
      const username = store.state.user.userInfo.username
      if (!username) return
      try {
        const response = await axios.get(`/api/announcement/my?publisher=${encodeURIComponent(username)}&type=ACTIVITY`)
        adminActivities.value = (response.data && response.data.data) || []
      } catch (e) {
        adminActivities.value = []
      }
    }

    // 统计数据
    const adminStats = ref([
      {
        id: 1,
        label: '总用户数',
        value: 0,
        icon: 'User'
      },
      {
        id: 2,
        label: '在线用户',
        value: 0,
        icon: 'Monitor'
      },
      {
        id: 3,
        label: '今日访问',
        value: 0,
        icon: 'DataAnalysis'
      },
      {
        id: 4,
        label: '系统告警',
        value: 0,
        icon: 'Warning'
      }
    ])

    const fetchStats = async () => {
      try {
        const res = await getOverviewStats()
        const stats = res
        adminStats.value[0].value = stats.totalUser
        adminStats.value[1].value = stats.onlineUser
        adminStats.value[2].value = stats.todayVisit
        adminStats.value[3].value = stats.systemWarning
      } catch (e) {
        // 可选：错误处理
      }
    }

    fetchStats()
    setInterval(fetchStats, 5000)

    // 快速服务
    const quickServices = ref([
      { id: 1, name: '课表查询', icon: 'Calendar', path: '/academic?tab=course' }, // 跳转课程中心
      { id: 2, name: '成绩查看', icon: 'Document', path: '/academic?tab=grade' }, // 跳转成绩管理
      { id: 3, name: '请假申请', icon: 'Message', path: '/academic?tab=leave' }, // 跳转请假管理
      { id: 4, name: '报修服务', icon: 'Phone', path: '/repair' }, // 跳转维修申请
      { id: 5, name: '设备预约', icon: 'Location', path: '/resource' }, // 跳转资源共享
      { id: 6, name: '待办事项', icon: 'Monitor', path: '/todo' }
    ])

    // 获取最近公告
    const loadRecentNotices = async () => {
      loadingNotices.value = true
      try {
        const params = {
          page: 1,
          size: 3
        }
        
        // 如果有用户ID，添加到参数中
        if (userId.value) {
          params.userId = userId.value
        }
        
        const response = await apiGetAnnouncementList(params)
        
        if (response.code === 200) {
          let notices = []
          
          // 处理不同的数据结构
          if (response.data && Array.isArray(response.data)) {
            // 直接是数组的情况
            notices = response.data
          } else if (response.data && response.data.content && Array.isArray(response.data.content)) {
            // 分页数据结构
            notices = response.data.content
          }
          
          // 处理带阅读状态的数据结构
          if (notices.length > 0 && notices[0].announcement) {
            notices = notices.map(item => item.announcement)
          }
          
          recentNotices.value = notices
        }
      } catch (error) {
        // 静默处理错误
      } finally {
        loadingNotices.value = false
      }
    }

    // 获取已通过报名的活动
    const loadApprovedActivities = async () => {
      loadingTodos.value = true
      try {
        if (userRole.value === 'ADMIN') {
          // 管理员：展示自己发布的活动
          const username = store.state.user.userInfo.username
          const res = await getMyAnnouncements({ publisher: username })
          let activities = []
          if (res.code === 200 && Array.isArray(res.data)) {
            activities = res.data.filter(item => item.type === 'ACTIVITY')
          }
          approvedActivities.value = activities.map(item => ({
            activityId: item.id,
            activityTitle: item.title,
            activityLocation: item.location,
            activityPublishTime: item.publishTime || item.createTime,
            signupId: item.id // 用id做key
          }))
        } else {
          // 普通用户：展示报名通过的活动
          const response = await getUserSignupDetails()
          let activities = []
          if (response.code === 200 && Array.isArray(response.data)) {
            activities = response.data.filter(item => {
              return item.signupStatus === 'APPROVED'
            })
          }
          approvedActivities.value = activities
        }
      } catch (error) {
        // 静默处理错误
      } finally {
        loadingTodos.value = false
      }
    }

    // 格式化时间
    const formatTime = (time) => {
      if (!time) return ''
      const date = new Date(time)
      return date.toLocaleDateString('zh-CN')
    }

    const handleModuleClick = (module) => {
      router.push(module.path)
    }

    const viewNotice = (notice) => {
      if (!notice.id) {
        ElMessage.error('公告信息不完整')
        return
      }
      
      const url = `/notice/${notice.id}`
      router.push(url)
    }

    const viewActivity = (activity) => {
      const activityId = activity.activityId
      if (!activityId) {
        ElMessage.error('活动信息不完整')
        return
      }
      
      const url = `/notice/${activityId}`
      router.push(url)
    }

    const handleServiceClick = (service) => {
      if (service.path) {
        router.push(service.path)
      } else {
        ElMessage.info(`访问服务：${service.name}`)
      }
    }

    // 新增方法
    const handleTodoMoreClick = () => {
      if (userRole.value === 'STAFF') {
        router.push({ path: '/todo', query: { tab: 'repair' } })
      } else {
        router.push('/todo')
      }
    }

    // 页面加载时自动获取课表
    onMounted(() => {
      semesterFilter.value = semesterOptions.value[0]
      fetchScheduleData()
      // 自动加载通知公告
      loadRecentNotices()
      // 自动加载待办事项
      if (userRole.value === 'ADMIN') {
        loadAdminActivities()
      } else if (userRole.value === 'STAFF') {
        loadStaffRepairs()
      } else {
      loadApprovedActivities()
      }
    })
    
    onBeforeUnmount(() => {
      // 清除定时器和事件监听器
      if (todoCheckTimer) {
        clearInterval(todoCheckTimer)
        todoCheckTimer = null
      }
      
      window.removeEventListener('check-admin-todos', fetchPendingTasks)
    })

    // 类型标签相关函数
    const getTagType = (type) => {
      const types = {
        'NEWS': 'primary',
        'NOTICE': 'warning',
        'ACTIVITY': 'success'
      }
      return types[type] || 'info'
    }

    const getTypeLabel = (type) => {
      const labels = {
        'NEWS': '新闻',
        'NOTICE': '通知',
        'ACTIVITY': '活动'
      }
      return labels[type] || type
    }

    return {
      banners,
      recentNotices,
      loadingNotices,
      approvedActivities,
      loadingTodos,
      adminStats,
      quickServices,
      loadRecentNotices,
      loadApprovedActivities,
      formatTime,
      getTagType,
      getTypeLabel,
      handleModuleClick,
      viewNotice,
      pendingTasks,
      userRole,
      viewActivity,
      handleServiceClick,
      semesterFilter,
      semesterOptions,
      timeSlots,
      getCoursesForTimeSlot,
      fetchScheduleData,
      fetchPendingTasks,
      adminActivities,
      loadAdminActivities,
      staffRepairs,
      loadStaffRepairs,
      handleTodoMoreClick
    }
  }
}
</script>

<style scoped>
.home-page {
  max-width: 1200px;
  margin: 0 auto;
}

.banner {
  margin-bottom: 40px;
  border-radius: 8px;
  overflow: hidden;
}

.banner-item {
  height: 100%;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-align: center;
}

.banner-content h2 {
  font-size: 36px;
  margin-bottom: 16px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.banner-content p {
  font-size: 18px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.core-modules {
  margin-bottom: 40px;
}

.module-card {
  background: white;
  border-radius: 8px;
  padding: 30px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.module-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.module-icon {
  margin-bottom: 16px;
  color: var(--primary-color);
}

.module-card h3 {
  margin-bottom: 12px;
  color: var(--text-color);
}

.module-card p {
  color: var(--text-color-secondary);
  line-height: 1.6;
}

.info-section {
  margin-bottom: 40px;
}

.card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  height: 300px;
  display: flex;
  flex-direction: column;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
}

.card-title {
  display: flex;
  align-items: center;
  margin: 0;
  color: var(--text-color);
}

.card-title .el-icon {
  margin-right: 8px;
  color: var(--primary-color);
}

.card-content {
  padding: 20px;
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.loading-container {
  padding: 20px 0;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notice-list,
.todo-list {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1;
  overflow-y: auto;
}

.notice-list li,
.todo-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: background-color 0.3s;
}

.notice-list li:last-child,
.todo-list li:last-child {
  border-bottom: none;
}

.notice-list li:hover,
.todo-list li:hover {
  background-color: #f5f5f5;
  padding-left: 8px;
  border-radius: 4px;
}

.empty-item {
  text-align: center;
  color: var(--text-color-secondary);
  cursor: default !important;
  padding: 40px 0;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.empty-item:hover {
  background-color: transparent !important;
  padding-left: 0 !important;
}

.notice-content {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.notice-type {
  flex-shrink: 0;
}

.notice-title,
.todo-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.notice-time,
.todo-time {
  color: var(--text-color-secondary);
  font-size: 12px;
}

.todo-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.todo-details {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--text-color-secondary);
  flex-wrap: wrap;
}

.todo-location {
  color: var(--primary-color);
}

.stats-section {
  margin-bottom: 40px;
}

.stat-card {
  background: white;
  border-radius: 8px;
  padding: 24px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.stat-icon {
  color: var(--primary-color);
  margin-right: 16px;
}

.stat-number {
  font-size: 24px;
  font-weight: bold;
  color: var(--text-color);
  margin-bottom: 4px;
}

.stat-label {
  color: var(--text-color-secondary);
  font-size: 14px;
}

.quick-services {
  margin-bottom: 40px;
}

.quick-services h2 {
  margin-bottom: 20px;
  color: var(--text-color);
}

.service-item {
  background: white;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.service-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.service-item .el-icon {
  color: var(--primary-color);
  margin-bottom: 8px;
}

.service-item span {
  display: block;
  color: var(--text-color);
  font-size: 14px;
}

/* 课程表美化 */
.schedule-section {
  margin-bottom: 40px;
}
.schedule-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
.course-schedule table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}
.course-schedule th, .course-schedule td {
  border: 1px solid #f0f0f0;
  font-size: 12px;
  min-width: 70px;
  max-width: 110px;
  width: 90px;
  height: 56px;
  padding: 2px;
  box-sizing: border-box;
  text-align: center;
  vertical-align: middle;
  background: #fff;
}
.course-schedule th {
  background-color: #1976d2;
  font-weight: 600;
  color: #fff;
  height: auto;
}
.course-schedule td {
  position: relative;
  vertical-align: middle;
}
.course-schedule th, .course-schedule td {
  font-size: 12px;
  min-width: 60px;
  padding: 2px;
  height: 36px;
}
.schedule-course {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2px 5px;
  padding: 2px 2px;
  border-radius: 8px;
  font-size: 13px;
  color: #1565c0;
  font-weight: 500;
  background: #e3f2fd;
  box-shadow: 0 1px 4px 0 rgba(0,0,0,0.04);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: box-shadow 0.2s;
  cursor: pointer;
  max-width: 90%;
  min-width: 0;
}
.schedule-course:hover {
  box-shadow: 0 4px 12px 0 rgba(0,0,0,0.10);
}
/* 课程名和地点分行显示 */
.schedule-course br {
  display: block;
  margin-bottom: 2px;
  }
.course-schedule td {
  position: relative;
}
/* 让时间段列内容垂直居中 */
.course-schedule td:first-child {
  vertical-align: middle;
}
@media (max-width: 768px) {
  .course-schedule th, .course-schedule td {
    font-size: 12px;
    min-width: 60px;
    padding: 2px;
    height: 36px;
  }
  .schedule-course {
    font-size: 11px;
    padding: 3px 5px;
  }
}
</style> 